import React, {memo, useRef} from "react";
import {WELLS_COLUMN, WELLS_ROW} from "../../pages/main/plate/config";
import {useSelector} from "react-redux";

import "./index.css";

export default memo(function AllelicTable(props) {
  const {wellId, setWellId} = props;
  const wellsContainer = useRef();  //  Wells容器
  const {allelicTableWell} = useSelector(state => ({
    allelicTableWell: state.allelicReducer.allelicTableWell
  }));

  function chooseWell(indey) {
    setWellId(indey);
  }

  return (
    <section className="allelicTable">
      <div>
        <div/>
        <div>
          {
            WELLS_COLUMN.map(col => <div key={col}>{col}</div>)
          }
        </div>
      </div>
      <div>
        {
          WELLS_ROW.map(row => <div key={row}>{row}</div>)
        }
      </div>
      <div ref={wellsContainer}>
        {
          allelicTableWell.map((item, index) => (
            <div key={index}
                 style={index === wellId ? {position: "relative",borderColor:"#fff",backgroundColor: "rgb(158, 158, 158)"} : {position: "relative"}}
                 className="allelicTableWellItem"
                 onClick={() => chooseWell(index)}

            >
              <div className={item}/>
            </div>
          ))
        }
      </div>
    </section>
  );
});
